import { isEqual, sortBy } from 'lodash-es';
import { defineStore } from 'pinia';
import { computed, ref, unref } from 'vue';

import { TabBarState, TabBarType } from '../';

/** 初始状态 */
const initState: TabBarState = {
  index: 0,
  list: undefined,
};

/** TabBar 存储 */
export function useTabBarStore(id: string = 'default') {
  const storeId = `app-tabbar-${id || 'default'}`;
  const tabBarStore = defineStore(
    storeId,
    () => {
      /** 状态信息 */
      const state = ref<TabBarState>({ ...initState });

      /** 获取选中标签的索引 */
      const getIndex = computed(() => unref(state).index || 0);
      /** 获取 TabBar 列表 */
      const getList = computed(() => unref(state).list?.sort((a, b) => a.index - b.index));

      /** 设置选中标签的索引(值或者名称) */
      const setIndex = (index: number | string) => {
        state.value = { ...state.value, index };
      };
      /** 设置 TabBar 列表 */
      const setList = (list?: TabBarType[]) => {
        if (!state.value?.list && !list) {
          return;
        }
        const flag = isEqual(sortBy(state.value?.list), sortBy(list));
        state.value = { ...state.value, list };
      };

      return {
        /** TabBar 状态 */
        state,
        /** 获取选中标签的索引 */
        getIndex,
        /** 获取 TabBar 列表 */
        getList,
        /** 设置选中标签的索引(值或者名称) */
        setIndex,
        /** 设置 TabBar 列表 */
        setList,
      };
    },
    {
      persist: true, // 如果需要持久化就写 true, 不需要持久化就写 false（或者去掉这个配置项）。
    },
  );
  return tabBarStore();
}
